<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example: Accessible Menu Button</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
    <link rel="stylesheet" href="../assets/css/main.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <script src="../../build/yui/yui-min.js"></script>
</head>
<body>

<div id="doc">
    <h1>Example: Accessible Menu Button</h1>

    
        <a href="#toc" class="jump">Jump to Table of Contents</a>
    

    <div class="yui3-g">
        <div id="main" class="yui3-u">
            <div class="content"><div class="intro">
    <p>
    This example illustrates how to use the Focus Manager Node Plugin,
    Event's <a href="http://yuilibrary.com/yui/docs/api/classes/YUI.html#event_delegate">delegation support</a> and
    <a href="http://yuilibrary.com/yui/docs/api/classes/YUI.html#event_mouseenter">mouseenter</a> event, along with
    the <a href="../overlay/index.html">Overlay widget</a> and Node's support for the
    <a href="http://www.w3.org/TR/wai-aria/">WAI-ARIA Roles and States</a> to
    create an accessible menu button.
    </p>
</div>

<div class="example">
    <style scoped>
        /*  The following two styles are necessary to override style rules in the
            YUI CSS file. */

        .example ul {
            margin: 0;
        }

        .example a:hover {
            text-decoration: none;
        }


        /*  Hide the button and list while it is being transformed into a menu button.  */
        .yui3-js-enabled .yui3-menubutton-loading #menu-1,
        .yui3-js-enabled .yui3-menubutton-loading #button-1 {
            display: none;
        }

    </style>

    <div class="yui3-menubutton-loading">
    <a id="button-1" href="#menu-1"><span><span>Move To</span></span></a>
    <div id="menu-1">
        <ul>
            <li><input type="button" name="button-1" value="Inbox"></li>
            <li><input type="button" name="button-2" value="Archive"></li>
            <li><input type="button" name="button-3" value="Trash"></li>
        </ul>
    </div>
</div>

<script>
YUI({
    modules: {
        "menubuttoncss": {
            type: "css",
            fullpath: "../assets/node-focusmanager/menubutton.css"
        },
        "menubuttonjs": {
            type: "js",
            fullpath: "../assets/node-focusmanager/menubutton.js",
            requires: ["menubuttoncss", "node-focusmanager", "node-event-simulate", "overlay"]
        }
    }
}).use("menubuttonjs");
</script>

</div>

<h2 id="setting-up-the-html">Setting Up the HTML</h2>

<p>
For a menu button, start with an <code>&#60;a&#62;</code> element whose
<code>href</code> attribute is set to the id of an <code>&#60;div&#62;</code>
that wraps a list of <code>&#60;input&#62;</code> elements.
Therefore, without JavaScript and CSS, the menu button is simply an in-page
link to a set of additional buttons.
</p>

<pre class="code prettyprint">&lt;div class=&quot;yui3-menubutton-loading&quot;&gt;
    &lt;a id=&quot;button-1&quot; href=&quot;#menu-1&quot;&gt;&lt;span&gt;&lt;span&gt;Move To&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;a&gt;
    &lt;div id=&quot;menu-1&quot;&gt;
        &lt;ul&gt;
            &lt;li&gt;&lt;input type=&quot;button&quot; name=&quot;button-1&quot; value=&quot;Inbox&quot;&gt;&lt;&#x2F;li&gt;
            &lt;li&gt;&lt;input type=&quot;button&quot; name=&quot;button-2&quot; value=&quot;Archive&quot;&gt;&lt;&#x2F;li&gt;
            &lt;li&gt;&lt;input type=&quot;button&quot; name=&quot;button-3&quot; value=&quot;Trash&quot;&gt;&lt;&#x2F;li&gt;
        &lt;&#x2F;ul&gt;
    &lt;&#x2F;div&gt;
&lt;&#x2F;div&gt;</pre>


<h2 id="progressive-enhancement">Progressive Enhancement</h2>

<p>
To account for the scenario where the user has CSS enabled in their browser but JavaScript
is disabled, the CSS used to style the menu button will be loaded via JavaScript
using the YUI instance's <a href="../yui/index.html#loader">built-in Loader</a>.
</p>

<pre class="code prettyprint">YUI({
    modules: {
        &quot;menubuttoncss&quot;: {
            type: &quot;css&quot;,
            fullpath: &quot;..&#x2F;assets&#x2F;node-focusmanager&#x2F;menubutton.css&quot;
        },
        &quot;menubuttonjs&quot;: {
            type: &quot;js&quot;,
            fullpath: &quot;..&#x2F;assets&#x2F;node-focusmanager&#x2F;menubutton.js&quot;,
            requires: [&quot;menubuttoncss&quot;, &quot;node-focusmanager&quot;, &quot;node-event-simulate&quot;, &quot;overlay&quot;]
        }
    }
}).use(&quot;menubuttonjs&quot;);</pre>


<p>
To prevent the user from seeing a flash unstyled content when JavaScript is enabled,
a style rule is created using YUI's <code>yui3-js-enabled</code> class name that will temporarily
hide the markup while the JavaScript and CSS are in the process of loading.  For more on using the
<code>yui3-js-enabled</code> class name, see the
<a href="../widget/index.html#progressive">Hiding Progressively Enhanced Markup</a> section of the
<a href="../widget/index.html">YUI Widget landing page</a>.
</p>

<pre class="code prettyprint">&#x2F;*  Hide the button and list while it is being transformed into a menu button.  *&#x2F;

.yui3-js-enabled .yui3-menubutton-loading #menu-1,
.yui3-js-enabled .yui3-menubutton-loading #button-1 {
    display: none;
}</pre>


<h2 id="aria-support">ARIA Support</h2>

<p>
Through the use of CSS and JavaScript the HTML for the menu button can be
transformed into something that looks and behaves like a desktop menu button,
but users of screen readers won't perceive it as an atomic widget, but rather
simply as a set of HTML elements.  However, through the application
of the
<a href="http://www.w3.org/TR/wai-aria/">WAI-ARIA Roles and States</a>, it is
possible to improve the semantics of the markup such that users of screen
readers perceive it as a menu button control.
</p>

<h2 id="keyboard-functionality">Keyboard Functionality</h2>

<p>
The keyboard functionality for the button's menu will be provided by the Focus
Manager Node Plugin.  The Focus Manager's
<a href="http://yuilibrary.com/yui/docs/api/classes/plugin.NodeFocusManager.html#config_descendants"><code>descendants</code></a>
attribute is set to a value of "input", so that only one menuitem in the
button's menu  is in the browser's default tab flow.  This allows users
navigating via the keyboard to use the tab key to quickly move into and out of
the menu.  Once the menu has focus, the user can move focus among each menuitem
using the up and down arrows keys, as defined by the value of the
<a href="http://yuilibrary.com/yui/docs/api/classes/plugin.NodeFocusManager.html#config_keys"><code>keys</code></a>
attribute.  The
<a href="http://yuilibrary.com/yui/docs/api/classes/plugin.NodeFocusManager.html#config_focusClass"><code>focusClass</code></a>
attribute is used to apply a class of <code>yui-menuitem-active</code> to
the parent <code>&#60;li&#62;</code> of each
<code>&#60;input&#62;</code> when it is focused, making it easy to style the
menuitem's focused state in all browsers.

<pre class="code prettyprint">YUI().use(&quot;*&quot;, function (Y) {

    var menuButton = Y.one(&quot;#button-1&quot;),
        menu;


    var initMenu = function () {

        menu = new Y.Overlay({
            contentBox: &quot;#menu-1&quot;,
            visible: false,
            tabIndex: null
        });

        menu.render();


        Y.one(&quot;#menu-1&quot;).setStyle(&quot;display&quot;, &quot;&quot;);

        var boundingBox = menu.get(&quot;boundingBox&quot;),
            contentBox = menu.get(&quot;contentBox&quot;);

        boundingBox.addClass(&quot;yui3-buttonmenu&quot;);
        contentBox.addClass(&quot;yui3-buttonmenu-content&quot;);


        &#x2F;&#x2F; Append a decorator element to the bounding box to render the shadow.

        boundingBox.append(&#x27;&lt;div class=&quot;yui3-menu-shadow&quot;&gt;&lt;&#x2F;div&gt;&#x27;);


        &#x2F;&#x2F;  Apply the ARIA roles, states and properties to the menu.

        boundingBox.setAttrs({
            role: &quot;menu&quot;,
            &quot;aria-labelledby&quot;: menuLabelID
        });

        boundingBox.all(&quot;input&quot;).set(&quot;role&quot;, &quot;menuitem&quot;);


        &#x2F;&#x2F;  For NVDA: Add the role of &quot;presentation&quot; to each LI
        &#x2F;&#x2F;  element to prevent NVDA from announcing the
        &#x2F;&#x2F;  &quot;listitem&quot; role.

        boundingBox.all(&quot;div,ul,li&quot;).set(&quot;role&quot;, &quot;presentation&quot;);


        &#x2F;&#x2F;  Use the FocusManager Node Plugin to manage the focusability
        &#x2F;&#x2F;  of each menuitem in the menu.

        contentBox.plug(Y.Plugin.NodeFocusManager, {

                descendants: &quot;input&quot;,
                keys: { next: &quot;down:40&quot;, &#x2F;&#x2F; Down arrow
                        previous: &quot;down:38&quot; },  &#x2F;&#x2F; Up arrow
                focusClass: {
                    className: &quot;yui3-menuitem-active&quot;,
                    fn: function (node) {
                        return node.get(&quot;parentNode&quot;);
                    }
                },
                circular: true

            });


        &#x2F;&#x2F;  Subscribe to the change event for the &quot;focused&quot; attribute
        &#x2F;&#x2F;  to listen for when the menu initially gains focus, and
        &#x2F;&#x2F;  when the menu has lost focus completely.

        contentBox.focusManager.after(&quot;focusedChange&quot;, function (event) {

            if (!event.newVal) {    &#x2F;&#x2F; The menu has lost focus

                &#x2F;&#x2F;  Set the &quot;activeDescendant&quot; attribute to 0 when the
                &#x2F;&#x2F;  menu is hidden so that the user can tab from the
                &#x2F;&#x2F;  button to the first item in the menu the next time
                &#x2F;&#x2F;  the menu is made visible.

                this.set(&quot;activeDescendant&quot;, 0);

            }

        });


        &#x2F;&#x2F;  Hide the button&#x27;s menu if the user presses the escape key
        &#x2F;&#x2F;  while focused either on the button or its menu.

        Y.on(&quot;key&quot;, function () {

            menu.hide();
            menuButton.focus();

        }, [menuButton, boundingBox] ,&quot;down:27&quot;);


        if (Y.UA.ie === 6) {

            &#x2F;&#x2F;  Set the width and height of the menu&#x27;s bounding box -
            &#x2F;&#x2F;  this is necessary for IE 6 so that the CSS for the
            &#x2F;&#x2F;  shadow element can simply set the shadow&#x27;s width and
            &#x2F;&#x2F;  height to 100% to ensure that dimensions of the shadow
            &#x2F;&#x2F;  are always sync&#x27;d to the that of its parent menu.

            menu.on(&quot;visibleChange&quot;, function (event) {

                if (event.newVal) {

                    boundingBox.setStyles({ height: &quot;&quot;, width: &quot;&quot; });

                    boundingBox.setStyles({
                        height: (boundingBox.get(&quot;offsetHeight&quot;) + &quot;px&quot;),
                        width: (boundingBox.get(&quot;offsetWidth&quot;) + &quot;px&quot;) });

                }

            });

        }


        menu.after(&quot;visibleChange&quot;, function (event) {

            var bVisible = event.newVal;

            &#x2F;&#x2F;  Focus the first item when the menu is made visible
            &#x2F;&#x2F;  to allow users to navigate the menu via the keyboard

            if (bVisible) {

                &#x2F;&#x2F;  Need to set focus via a timer for Webkit and Opera
                Y.Lang.later(0, contentBox.focusManager, contentBox.focusManager.focus);

            }

            boundingBox.set(&quot;aria-hidden&quot;, (!bVisible));

        });


        &#x2F;&#x2F;  Hide the menu when one of menu items is clicked.

        boundingBox.delegate(&quot;click&quot;, function (event) {

            alert(&quot;You clicked &quot; + this.one(&quot;input&quot;).get(&quot;value&quot;));

            contentBox.focusManager.blur();
            menu.hide();

        }, &quot;li&quot;);


        &#x2F;&#x2F;  Focus each menuitem as the user moves the mouse over
        &#x2F;&#x2F;  the menu.

        boundingBox.delegate(&quot;mouseenter&quot;, function (event) {

            var focusManager = contentBox.focusManager;

            if (focusManager.get(&quot;focused&quot;)) {
                focusManager.focus(this.one(&quot;input&quot;));
            }

        }, &quot;li&quot;);


        &#x2F;&#x2F;  Hide the menu if the user clicks outside of it or if the
        &#x2F;&#x2F;  user doesn&#x27;t click on the button

        boundingBox.get(&quot;ownerDocument&quot;).on(&quot;mousedown&quot;, function (event) {

            var oTarget = event.target;

            if (!oTarget.compareTo(menuButton) &amp;&amp;
                !menuButton.contains(oTarget) &amp;&amp;
                !oTarget.compareTo(boundingBox) &amp;&amp;
                !boundingBox.contains(oTarget)) {

                menu.hide();

            }

        });

    };


    menuButton.addClass(&quot;yui3-menubutton&quot;);


    &#x2F;&#x2F;  Hide the list until it is transformed into a menu

    Y.one(&quot;#menu-1&quot;).setStyle(&quot;display&quot;, &quot;none&quot;);


    &#x2F;&#x2F;  Remove the &quot;yui3-menubutton-loading&quot; class from the parent container
    &#x2F;&#x2F;  now that the necessary YUI dependencies are loaded and the
    &#x2F;&#x2F;  menu button has been skinned.

    menuButton.ancestor(&quot;.yui3-menubutton-loading&quot;).removeClass(&quot;yui3-menubutton-loading&quot;);


    &#x2F;&#x2F;  Apply the ARIA roles, states and properties to the anchor.

    menuButton.setAttrs({
        role: &quot;button&quot;,
        &quot;aria-haspopup&quot;: true
    });


    &#x2F;&#x2F;  Remove the &quot;href&quot; attribute from the anchor element to
    &#x2F;&#x2F;  prevent JAWS and NVDA from reading the value of the &quot;href&quot;
    &#x2F;&#x2F;  attribute when the anchor is focused.

    if ((Y.UA.gecko || Y.UA.ie) &amp;&amp; navigator.userAgent.indexOf(&quot;Windows&quot;) &gt; -1) {

        menuButton.removeAttribute(&quot;href&quot;);

        &#x2F;&#x2F;  Since the anchor&#x27;s &quot;href&quot; attribute has been removed, the
        &#x2F;&#x2F;  element will not fire the click event in Firefox when the
        &#x2F;&#x2F;  user presses the enter key.  To fix this, dispatch the
        &#x2F;&#x2F;  &quot;click&quot; event to the anchor when the user presses the
        &#x2F;&#x2F;  enter key.

        Y.on(&quot;key&quot;, function (event) {

            menuButton.simulate(&quot;click&quot;);

        }, menuButton, &quot;down:13&quot;);

    }


    &#x2F;&#x2F;  Set the &quot;tabIndex&quot; attribute of the anchor element to 0 to
    &#x2F;&#x2F;  place it in the browser&#x27;s default tab flow.  This is
    &#x2F;&#x2F;  necessary since 1) anchor elements are not in the default
    &#x2F;&#x2F;  tab flow in Opera and 2) removing the &quot;href&quot; attribute
    &#x2F;&#x2F;  prevents the anchor from firing its &quot;click&quot; event
    &#x2F;&#x2F;  in Firefox.

    menuButton.set(&quot;tabIndex&quot;, 0);

    &#x2F;&#x2F;  Since there is some intermediary markup (&lt;span&gt;s) between the anchor element with the role
    &#x2F;&#x2F;  of &quot;button&quot; applied and the text label for the anchor - we need to use the
    &#x2F;&#x2F;  &quot;aria-labelledby&quot; attribute to ensure that screen readers announce the text label for the
    &#x2F;&#x2F;  button.

    var menuLabel = menuButton.one(&quot;span span&quot;),
        menuLabelID = Y.stamp(menuLabel);

    menuLabel.set(&quot;id&quot;, menuLabelID);
    menuButton.set(&quot;aria-labelledby&quot;, menuLabelID);

    var showMenu = function (event) {

        &#x2F;&#x2F;  For performance: Defer the creation of the menu until
        &#x2F;&#x2F;  the first time the button is clicked.

        if (!menu) {
            initMenu();
        }


        if (!menu.get(&quot;visible&quot;)) {

            menu.set(&quot;align&quot;, {
                node: menuButton,
                points: [Y.WidgetPositionAlign.TL, Y.WidgetPositionAlign.BL]
            });

            menu.show();

        }

        &#x2F;&#x2F;  Prevent the anchor element from being focused
        &#x2F;&#x2F;  when the users mouses down on it.
        event.preventDefault();

    };


    &#x2F;&#x2F;  Bind both a &quot;mousedown&quot; and &quot;click&quot; event listener to
    &#x2F;&#x2F;  ensure the button&#x27;s menu can be invoked using both the
    &#x2F;&#x2F;  mouse and the keyboard.

    menuButton.on(&quot;mousedown&quot;, showMenu);
    menuButton.on(&quot;click&quot;, showMenu);

});</pre>

</div>
        </div>

        <div id="sidebar" class="yui3-u">
            
                <div id="toc" class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Table of Contents</h2>
                    </div>

                    <div class="bd">
                        <ul class="toc">
<li>
<a href="#setting-up-the-html">Setting Up the HTML</a>
</li>
<li>
<a href="#progressive-enhancement">Progressive Enhancement</a>
</li>
<li>
<a href="#aria-support">ARIA Support</a>
</li>
<li>
<a href="#keyboard-functionality">Keyboard Functionality</a>
</li>
</ul>
                    </div>
                </div>
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                                    <li data-description="Creating an accessible toolbar using the Focus Manager Node Plugin and Node&#x27;s support for the WAI-ARIA Roles and States.">
                                        <a href="node-focusmanager-1.html">Accessible Toolbar</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Creating an accessible menu button using the Focus Manager Node Plugin, Event&#x27;s delegation support and mouseenter event, along with the Overlay widget and Node&#x27;s support for the WAI-ARIA Roles and States.">
                                        <a href="node-focusmanager-3.html">Accessible Menu Button</a>
                                    </li>
                                
                            
                        </ul>
                    </div>
                </div>
            

            
        </div>
    </div>
</div>

<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>

</body>
</html>
